<template>
  <div :style="styleObj">
    <a-carousel dots-class="slick-dots slick-thumb" :autoplay="carouselOptions.autoplay" :dots="carouselOptions.dots" :dotPosition="carouselOptions.dotPosition">
      <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
        <a-icon type="left-circle" />
      </div>
      <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px;zIndex: 1">
        <a-icon type="right-circle" />
      </div>
      <div v-for="item in list">
        <a v-if="carouselOptions.link" :href="item.url" :target="carouselOptions.target">
          <img :src="item.pic" :alt="item.title" :width="styleObj.width" :height="styleObj.height"/>
        </a>
        <img v-else :src="item.pic" :alt="item.title" :width="styleObj.width" :height="styleObj.height"/>
      </div>
    </a-carousel>
  </div>
</template>
<script>
export default {
  name: 'WidgetSlider',
  props: {
    value: Object,
    ispreview: Boolean
  },
  components: {},
  data() {
    return {
      list: [],
      optionsSetup: {},
      optionsPosition: {},
      optionsData: {}
    }
  },
  computed: {
    styleObj() {
      const allStyle = this.optionsPosition;
      return {
        position: this.ispreview ? "absolute" : "static",
        width: allStyle.width + "px",
        height: allStyle.height + "px",
        zIndex: allStyle.zIndex
      };
    },
    carouselOptions(){
      const allSetup = this.optionsSetup;
      console.log(allSetup)
      return {
        autoplay: allSetup.autoplay,
        dots: allSetup.dots,
        dotPosition: allSetup.dotPosition,
        link: allSetup.link,
        target: allSetup.target,
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.optionsSetup = val.setup;
        this.optionsPosition = val.position;
        this.optionsData = val.data;
        this.handlerData();
      },
      deep: true
    }
  },
  mounted() {
    console.log(this.value)
    this.optionsSetup = this.value.setup;
    this.optionsPosition = this.value.position;
    this.optionsData = this.value.data;
    this.handlerData();
  },
  methods: {
    handlerData() {
      const tableData = this.optionsData;
      tableData.dataType == "staticData"
        ? this.handlerStaticData(tableData.staticData)
        : this.handlerDymaicData(tableData.dynamicData, tableData.refreshTime);
    },
    handlerStaticData(data) {
      this.list = data;
    },
    handlerDymaicData(data, refreshTime) {
    },
  }
}
</script>
<style scoped>
.ant-carousel >>> .slick-slide {
  text-align: center;
  width: auto;
  height: auto;
  overflow: hidden;
}
</style>